<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if运行的成本比较高，常用于初始化，经常来回切换不建议使用它 -->
<div v-if="type==='a'">A</div>
<div v-else-if="type==='b'">B</div>
<div v-else-if="type==='c'">C</div>
<div v-else>不是ABC</div>   

<hr>
<div v-if="Math.random()>0.5">随机数大于0.5</div>
<!-- v-show的初始渲染开销v-if高，但是你经常切换元素推荐使用它  -->
<div v-show="type==='a'">show</div>   
    </div>
    <script>
        const {ref} =Vue
        const app = Vue.createApp({
            setup(props) {
                const type =ref('a')
                return {
                    type,
                    
                }
            }
        }).mount("#app");
    </script>
</body>

</html>